import { useEffect } from "react";
import { message, Popconfirm, Table, Tag, Row, Col } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh } from "@douyinfe/semi-icons";
import { useModel, history } from "umi";
import { useReactive } from "ahooks";

import { useApplication } from "../../../hooks/application/organization";

const { Column } = Table;

const WaitShelfOrganizationApplications = () => {
    const { windowInnerHeight } = useModel("global");
    const { submitLoading, updateApplicationShelfState, stateColor } = useApplication();

    const { appLoading, loadApplicationByShelfStatus, applications } = useApplication();

    const state = useReactive({
        selectedApplication: [],
    });

    const loadData = async () => {
        await loadApplicationByShelfStatus("待上架");
    };

    useEffect(() => {
        loadData();
    }, []);

    const onFinish = async () => {
        updateApplicationShelfState(state.selectedApplication, "已上架", (res) => {
            if (res) {
                message.success("上架成功！");
                loadData();
                state.selectedApplication = [];
            }
        });
    };

    const changeAppShelfState = async (record) => {
        updateApplicationShelfState([record.aiUuid], "已上架", (res) => {
            if (res) {
                message.success("上架成功！");
                loadData();
                state.selectedApplication = [];
            }
        });
    };

    const onSelectChange = (newSelectedRowKeys) => {
        state.selectedApplication = newSelectedRowKeys;
    };

    const rowSelection = {
        selectedRowKeys: state.selectedApplication,
        onChange: onSelectChange,
    };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 53;

    return (
        <SemiCard
            title={<span style={{ lineHeight: "32px", fontSize: 16 }}>待上架组织应用列表</span>}
            headerExtraContent={
                <ButtonGroup size={"default"}>
                    <Button icon={<IconRefresh />} onClick={loadData}></Button>
                </ButtonGroup>
            }
            headerStyle={{ padding: "10px 14px" }}
            shadows="always"
            bordered={false}
            bodyStyle={{ padding: 0, height: cardBodyHeight - 60 }}
            footerStyle={{ padding: 0 }}
            footerLine={true}
            footer={
                <div style={{ padding: 14, display: "flex", justifyContent: "space-between" }}>
                    <Popconfirm title="确认要下架这些应用吗？" okButtonProps={{ loading: submitLoading }} onConfirm={onFinish}>
                        <Button theme="solid" disabled={state.selectedApplication.length > 0 ? false : true}>
                            应用上架
                        </Button>
                    </Popconfirm>
                </div>
            }
        >
            <Table
                loading={appLoading}
                size="small"
                dataSource={applications}
                rowKey="aiUuid"
                bordered
                pagination={false}
                rowSelection={rowSelection}
                scroll={{ y: cardBodyHeight - 40 - 50 }}
            >
                <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                <Column title="应用名称" dataIndex="aiName" align="left" />
                <Column
                    title="状态"
                    dataIndex="aiStat"
                    width={100}
                    align="center"
                    render={(_, r) => (
                        <Popconfirm
                            title={`确认要上架【${r.aiName}】?`}
                            placement="topRight"
                            okButtonProps={{ loading: submitLoading }}
                            onConfirm={(e) => {
                                e.stopPropagation();
                                changeAppShelfState(r);
                            }}
                            onCancel={(e) => e.stopPropagation()}
                        >
                            <Tag color={stateColor[_]}>{_}</Tag>
                        </Popconfirm>
                    )}
                />
            </Table>
        </SemiCard>
    );
};

export default WaitShelfOrganizationApplications;
